<template>
  <!--  评论输入框组件 -->
  <div>
    <!-- 组件容器 -->
    <div class="commentInput">
      <!-- 4-4-1 输入框容器 -->
      <div v-if="!isShowTextarea" class="inputContain">
        <!-- 输入框 -->
        <!-- focus：聚焦事件 -->
        <input
          :placeholder="placeholderText"
          class="commentFrame"
          type="text"
          :value="content"
          @focus="showTextarea"
        />
        <!-- 评论 -->
        <div class="disc">
          <!-- 评论字体附表 -->
          <span class="iconfont iconpinglun-"></span>
          <!-- 评论条数 -->
          <div class="num">102</div>
        </div>
        <!-- 收藏字体图标 -->
        <span class="iconfont iconshoucang"></span>
        <!-- 分享字体图标 -->
        <span class="iconfont iconfenxiang"></span>
      </div>

      <!-- 4-4-2 文本域容器 -->
      <div class="textBox" v-if="isShowTextarea">
        <!-- @blur:失焦事件 -->
        <textarea
          :placeholder="placeholderText"
          v-model="content"
          cols="30"
          rows="3"
          ref="textarea"
          @blur="hideTextarea"
        ></textarea>
        <div class="send">
          <button @click="send">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //数据
  data() {
    return {
      isShowTextarea: false,
      content: ""
    };
  },
  //接受父组件传过来的值
  props: ["parentInfo"],
  //计算属性
  computed: {
    placeholderText() {
      if (this.parentInfo.nickname) {
        return "回复 @ " + this.parentInfo.nickname;
      } else {
        return "写评论";
      }
    }
  },
  created() {},
  //方法
  methods: {
    //显示文本域
    showTextarea() {
      //将isShowTextarea 改为true
      this.isShowTextarea = true;
      //vue提供的一个函数，滴答，不会一行代码执行一次，所有代码执行完再刷新页面
      this.$nextTick(() => {
        //获取文本域dom元素,并且自动聚焦
        this.$refs.textarea.focus();
      });
    },
    //隐藏文本域
    hideTextarea() {
      setTimeout(() => {
        //将isShowTextarea 改为true
        this.isShowTextarea = false;
      }, 100);
    },
    //发送按钮事件
    send() {
      console.log(this.content);
      console.log(this.$route.params.id);

      //检测parentId是否存在
      let data = {
        content: this.content
      };
      if (this.parentInfo) {
        data.parent_id = this.parentInfo.id;
      }

      console.log(this.parentInfo.id);

      //发送ajax请求，发布评论
      this.$axios({
        url: "post_comment/" + this.$route.params.id,
        method: "post",
        data: data
      }).then(res => {
        console.log(res.data);
        if ((res.data.message = "评论发布成功")) {
          //清空输入框内容
          this.content = "";
          //提醒父页面刷新页面
          this.$emit("reloadComment");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
//组件容器
.commentInput {
  display: flex;
  position: fixed;
  bottom: 20px;
  padding: 10px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  background: #f2f2f2;
  //1.输入框容器
  .inputContain {
    display: flex;

    //1.1输入框
    .commentFrame {
      width: 55.556vw;
      height: 8.333vw;
      line-height: 8.333vw;
      border-radius: 8.333vw;
      background: #d7d7d7;
      border: none;
      outline: none;
      padding: 0 4.167vw;
      box-sizing: border-box;
    }
    //1.2评论
    .disc {
      position: relative;
      display: flex;
      margin-left: 5.556vw;
      //评论
      .iconpinglun- {
        font-size: 8.333vw;
      }
      //评论条数
      .num {
        position: absolute;
        top: -2.222vw;
        left: 1.111vw;
        padding: 0vw 2.222vw;
        height: 6.111vw;
        line-height: 6.667vw;
        border-radius: 3.333vw;
        background: red;
        color: #fff;
      }
    }
    //1.3收藏图标
    .iconshoucang {
      margin: 0 5.556vw;
      font-size: 6.667vw;
    }
    //1.4分享图标
    .iconfenxiang {
      font-size: 6.667vw;
    }
  }
  //2.文本域容器
  .textBox {
    display: flex;
    //侧轴底部对齐
    align-items: flex-end;
    //文本域
    textarea {
      width: 63.889vw;
      box-sizing: border-box;
      padding: 2.778vw 0;
      resize: none;
      background: #d7d7d7;
      border-radius: 2.778vw;
      border: none;
      outline: none;
      margin-right: 9.444vw;
    }
    //发送按钮
    .send {
      button {
        padding: 3.889vw 5.556vw;
        height: 7.222vw;
        line-height: 1.111vw;
        background: red;
        font-size: 3.333vw;
        border-radius: 13.889vw;
        border: none;
        color: #fff;
      }
    }
  }
}
</style>